<!--
 * @author: 十一
 * @since: 2024-10-28
 * workers.vue
 * @desc: 职工考核统计
-->
<template>
    <div
      style="display: flex; align-items: center; justify-content: space-between"
    >
      <div>
        <a-form layout="inline">
          <a-form-item>
            <a-select
              v-model:value="formState.name"
              style="width: 280px"
              placeholder="考核名称查询"
              @change="handleChangeExamineName"
              allowClear
            >
              <a-select-option
                :value="item.id"
                v-for="item in examineName"
                :key="item.id"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-input
              v-model:value="formState.empname"
              style="width: 280px"
              allowClear
              placeholder="姓名查询"
            />
          </a-form-item>
          <a-form-item>
            <a-select
              v-model:value="formState.orgId"
              style="width: 280px"
              placeholder="部门查询"
              @change="handleChangeDept"
              allowClear
            >
              <a-select-option
                :value="item.orgId"
                v-for="item in deptList"
                :key="item.orgId"
                >{{ item.orgName }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-select
              v-model:value="formState.assessmentGrade"
              style="width: 280px"
              placeholder="考核等级查询"
              @change="handleChangeGrade"
              allowClear
            >
              <a-select-option
                :value="item.label"
                v-for="item in assessmentGradeList"
                :key="item.label"
                >{{ item.label }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary"  @click="getData">
              查询
            </a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary"  @click="exportToExcel">
              导出
            </a-button>
          </a-form-item>
        </a-form>
      </div>
      <ReloadOutlined class="operation-btn" @click="getData"/>
    </div>
    <br />
   <div style="border-top: 1px solid #f0f0f0;">
      <div class="table-header" >
      <div style="width: 20%;">部门</div>
      <div style="width: 20%">姓名</div>
      <div style="width: 20%">评定分数</div>
      <div style="width: 20%">评定等级</div>
      <div style="width: 20%">产假</div>
    </div>
    <div class="table-header" v-for="(item, index) in dataList" :key="index" style="display: flex" >
      <div style="width: 20%;">{{ item.orgName }} ({{ item.children.length }}人)</div>
      <div
        style="display: flex;width: 80%; flex-direction: column; border-right: none; border-bottom: none; " >
        <div v-for="children in item.children" :key="children.orgId" style="width: 100%; display: flex; border-bottom: 1px solid #f0f0f0" class="table-chidren">
          <div style="width: 25%;">{{ children.empname }}</div>
          <div style="width: 25%;" class="clear-border">
            <a-tag color="red" v-if="children.status==-2">部门退回</a-tag>
            <a-tag color="red" v-if="children.status==-3">分管退回</a-tag>
            <a-tag color="red" v-if="children.status==-1">停止上报</a-tag>
            <a-tag color="red" v-if="children.status==0">待启用</a-tag>
            <a-tag color="red" v-if="children.status==1">开始填报</a-tag>
            <a-tag color="red" v-if="children.status==2">部门领导审核</a-tag>
            <a-tag color="red" v-if="children.status==3">分管领导审核</a-tag>
            <a-tag color="red" v-if="children.status==100">个人审核完毕</a-tag>
            <a-tag color="red" v-if="children.status==101">支部汇总</a-tag>
            <a-tag color="red" v-if="children.status==102">分管汇总</a-tag>
            <span  v-if="children.status==200"> {{ children.finalScore }}</span>
          </div>
          <div style="width: 25%;" class="clear-border">
            {{ children.assessmentGrade?children.assessmentGrade:'暂无' }}
          </div>
          <div style="width: 25%;" class="clear-border">
              <a-tag color="#87d068" v-if="children.onMaternityLeave">是</a-tag>
              <a-tag v-else>否</a-tag>
            </div>
        </div>
      </div>
    </div>
   </div>
  </template>
  
  <script lang="ts" setup>
  import { reactive, UnwrapRef, ref } from "vue";
  import { ReloadOutlined } from "@ant-design/icons-vue";
  import * as XLSX from 'xlsx'; // 明确使用命名导入
  import {
    GetViewAssessmentStauts,
    GetWorkersStatistcs,
    GetDeptInfo,
  } from "@/api/main";
  import useUserStore from "@/stores/modules/user";
  import { message } from "ant-design-vue";
  const userStore = useUserStore();
  
  interface FormState {
    empname: string;
    statusGlid: number | null;
    assessmentGrade: string | null | number;
    orgId: string | null | number;
  }
  const formState: UnwrapRef<FormState> = reactive({
    empname: "",
    statusGlid: null,
    assessmentGrade: null,
    orgId: null,
  });
  const selectExamineName = ref("")
  // 考核名称选中
  const handleChangeExamineName = (value: any) => {
      formState.statusGlid = value;
    
  };
  // 部门选中
  const handleChangeDept = (value: any) => {
    formState.orgId = value;
  };
  const handleChangeGrade = (value: any) => {
    formState.assessmentGrade = value;
  };
  // 考核名称list
  const examineName = ref([]);
  // 部门list
  const deptList = ref([]);
  // 表格数据
  const dataList = ref([]);
  const dataOriginalList = ref([]);
  
  const assessmentGradeList = [
    { label: "A1" },
    { label: "A2" },
    { label: "B1" },
    { label: "B2" },
    { label: "B3" },
    { label: "C1" },
    { label: "C2" },
    { label: "D" },
  ];
  
  const columns = [
    { title: '部门', dataIndex: 'orgName' },
    { title: '姓名', dataIndex: 'empname' },
    { title: '评定分数', dataIndex: 'finalScore' },
    { title: '评定等级', dataIndex: 'assessmentGrade' },
    { title: '产假', dataIndex: 'isOnMaternityLeaveDesc' },
  ]
  const exportToExcel = () => {
      if(dataOriginalList.value.length == 0){
          message.error('暂无数据')
          return
      }else {
          const worksheet = XLSX.utils.aoa_to_sheet([columns.map(col => col.title),...dataOriginalList.value.map(item => columns.map(col => item[col.dataIndex]))]);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
      XLSX.writeFile(workbook, `data.xlsx`);
      message.success('导出成功')
      }
     
  };
  // 获取考核名称
  const getExamine = () => {
    GetViewAssessmentStauts({ empId: userStore.empid }).then((response: any) => {
      examineName.value = response.data;
    });
  };
  // 获取部门
  const getDept = () => {
    GetDeptInfo().then((response: any) => {
      console.log(response);
      deptList.value = response.data;
    });
  };
  getExamine();
  getDept();
  
  // 获取职工双月考核列表
  const getData = () => {
    GetWorkersStatistcs({
      empname: formState.empname,
      orgId: formState.orgId,
      personnelType: 1,
      assessmentGrade: formState.assessmentGrade,
      statusGlid: formState.statusGlid,
    }).then((response: any) => {
      console.log(response);
      let groupedData = {};
      // 把考核内容list 改为树形结构
      if(response.data){
          response.data.forEach((item) => {
        if (!groupedData[item.orgId]) {
          groupedData[item.orgId] = {
            orgName: item.orgName,
            orgId: item.orgId,
            children: [],
          };
        }
        groupedData[item.orgId].children.push(item);
      });
      }
      dataList.value = groupedData || [];
      dataOriginalList.value = response.data;
    });
  };
  </script>
  
  <style scoped>
  .operation-btn {
    border: 1px solid #f2f3f5;
    width: 35px;
    height: 35px;
    display: block;
    border-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 10px;
    font-weight: 700;
  }
  
  .operation-btn:hover {
    background: #f2f3f5;
    color: #1677ff;
  }
  
  .table-header {
    display: flex;
    width: 100%;
    /* align-items: center; */
    /* border-top: 1px solid #f0f0f0; */
    border-left: 1px solid #f0f0f0;
  }
  
  .table-header > div {
    border-right: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    /* flex: 1; */
    /* height: 50px; */
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .clear-border {
    align-items: normal;
  }
  
  .clear-border div {
    border: 1px solid #d9d9d9;
    min-height: 30px;
  }
  
  .table-chidren > div {
    border-bottom: none;
    line-height: 2;
    border-right: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
  }
  </style>
  